<script setup>
// 导入组件
import ShopInfo from '@/components/ShopInfo.vue'
import Product from '@/components/Product.vue'
import Cart from '@/views/shop/CartView.vue'
// 导入状态管理
import { useShopInfoStore } from '@/stores'
// 导入路由
import { useRoute } from 'vue-router'
// 导入计算属性、响应式、ref
import { computed, ref, toRefs } from 'vue'

const shopId = useRoute().params.id
const shopInfoStore = useShopInfoStore().findById(shopId)
const { category } = toRefs(shopInfoStore)
const tabId = ref(0)

const showInfo = computed(() => {
  const res = category.value.find((item) => item.id == tabId.value)
  return res ? [res] : category.value
})
</script>
<template>
  <div class="shopView">
    <!-- 搜索 -->
    <div class="search">
      <span class="back iconfont" @click="$router.push('/')">&#xe697;</span>
      <span class="iconfont">&#xe632;</span>
      <span class="search_text">山姆会员商店优惠商品</span>
    </div>
    <ShopInfo :item="shopInfoStore" />
    <!-- 商品列表 -->
    <div class="product">
      <div class="product_tab">
        <div class="product_tab_item" :class="{ active: tabId == 0 }" @click="tabId = 0">
          全部商品
        </div>
        <div
          class="product_tab_item"
          v-for="item in category"
          :key="item.id"
          :class="{ active: tabId == item.id }"
          @click="tabId = item.id"
        >
          {{ item.name }}
        </div>
      </div>

      <div class="product_list">
        <div class="product_item" v-for="item in showInfo" :key="item.id">
          <div v-for="value in item.list" :key="value.id">
            <Product :item="value" :shopId="shopId" />
          </div>
        </div>
      </div>
    </div>
    <!-- 购物车 -->
    <!-- :shopName="shopInfo.name" -->
    <Cart :shopId="shopId" />
  </div>
</template>
<style scoped lang='scss'>
@import '@/style/mixins.scss';
@import '@/style/viriables.scss';

.search {
  //rem单位 和 px 单位的转换 1rem = 100px
  margin: 10px 10% 10px 10%;
  padding-left: 0.16rem;
  line-height: 0.32rem;
  background-color: $search-bgColor;
  border-radius: 0.16rem;
  width: 80%;
  position: relative;
  & .back {
    position: absolute;
    left: -25px;
    font-size: 25px;
    top: -1px;
    color: #b7b7b7;
  }
  &_text {
    margin-left: 0.12rem;
    font-size: 0.14rem;
    font-family: PingFangSC-Regular;
    color: $search-fontColor;
  }
}
.product {
  width: 100%;
  border: 1px solid #e5e5e5;
  display: flex;
  min-height: 75vh;
  &_tab {
    width: 25%;
    border: 1px solid #e5e5e5;

    &_item {
      $height: 50px;
      height: $height;
      line-height: $height;
      text-align: center;
      font-size: 0.16rem;
    }
  }
  &_list {
    width: 100%;
    display: block;
    padding: 10px;
    @include scrollStyle();
  }
}
.active {
  background-color: #ffffff;
}

.shopView {
  width: 100%;
}
</style>